import React from 'react';
import { Table, Icon, Divider } from 'antd';
import axios from '../../axios';
import { Link } from 'react-router-dom';

const columns = [{
  title: 'Name',
  dataIndex: 'username',
  key: 'username',
  render: text => <a href="#">{text}</a>,
}, {
  title: 'Age',
  dataIndex: 'password',
  key: 'password',
}, {
  title: 'Address',
  dataIndex: 'password',
  key: 'address',
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => (
    <span>
      <Link to={'/user-detail/'+record.username}>Action 一 {record.username}</Link>
      <Divider type="vertical" />
      <a href="#">Delete</a>
      <Divider type="vertical" />
      <a href="#" className="ant-dropdown-link">
        More actions <Icon type="down" />
      </a>
    </span>
  ),
}];

const data = [{
  key: '1',
  username: 'John Brown',
  password: 'New York No. 1 Lake Park',
}, {
  key: '2',
  username: 'Jim Green',
  password: 'London No. 1 Lake Park',
}, {
  key: '3',
  username: 'Joe Black',
  password: 'Sidney No. 1 Lake Park',
}];

export default class UserList extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }
  componentDidMount() {
    var _this = this;
    axios.get('/user/list')
    .then(function (res) {
        console.log(res.data);
        if(res.data.status == 200){
            _this.setState({data: res.data.data});
        }
        
    })
    .catch(function (error) {
        console.log(error);
    });
  }

  render() {
    return (
      <Table columns={columns} dataSource={this.state.data} bordered />
    )
  }
}